<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>05_事件委托</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      ul,
      li {
        list-style: none;
      }

      ul {
        width: 1000px;
        height: 16000px;
        background-color: pink;
        overflow: hidden;
      }

      li {
        width: 200px;
        height: 200px;
        background-color: skyblue;
        margin: 20px;
      }
    </style>
  </head>

  <body>
    <ul>
      <li>0</li>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>

    <!-- 
    点击任何一个li 要求显示其innerText 
    点击ul的空白处 新生成一个li 内部文字依次递增 并且依然有效 逻辑同上

    DOM事件处理器函数中的this是事件源
    -->
    <script>
      var ul = document.querySelector("ul");
      var lis = document.getElementsByTagName("li");

      // 点击任何一个li 要求显示其innerText
      for (var i = 0; i < lis.length; i++) {
        lis[i].addEventListener("click", function (e) {
          console.log(this, this.innerText);
        });
      }

      /* 点击空白处 新增一个Li */
      ul.addEventListener("click", function (e) {
        // console.log(e.target, e.target.nodeName);

        // 如果点击的是ul的空白处
        // 点击的末梢元素的节点名称为UL时
        if (e.target.nodeName === "UL") {
          // 造一个新的Li出来
          var li = document.createElement("li");
          // li中写字：ul的子元素个数-1
          li.innerText = ul.children.length;

          // 给新生成的元素添加事件监听器
          li.addEventListener("click", function (e) {
            console.log(this, this.innerText);
          });

          // 将li丢入ul子元素的末尾
          ul.appendChild(li);
        }
      });

      console.log("game over!");
    </script>
  </body>
</html>
